import React , { useState }from 'react';
import './index.scss';
import { Switch,Input,InputNumber  } from 'antd';
const HomeDetail = () => {
     const configList=[
          {
    confCode: "",
    name: "是否开启超时回到登录页",
    enable: false,
    confParameter: "",
    desc: "",
    type: 1,
  },
  {
    confCode: "",
    name: "是否开启登录账号锁定",
    enable: false,
    confParameter: "",
    desc: "",
    type: 1,
  },
  {
    confCode: "",
    name: "账号锁定时长",
    enable: false,
    confParameter: "",
    desc: "",
    type: 2,
  },
  {
    confCode: "",
    name: "是否开启数据加密传输",
    enable: false,
    confParameter: "",
    desc: "",
    type: 1,
  },
     ]

  const [configStates, setConfigStates] = useState(configList.reduce((acc, config) => {
    acc[config.name] = config.enable;
    return acc;
  }, {}));
  const [inputValues, setInputValues] = useState(configList.reduce((acc, config) => {
    acc[config.name] = config.confParameter;
    return acc;
  }, {}));
    // 开关变化
  const handleSwitchChange = (name) => (checked) => {
    console.log(name,checked);
    
    setConfigStates((data) => ({
      ...data,
      [name]: checked,
    }));

    
  };
    // 输入框变化
  const handleInputChange = (name) => (event) => {
    const value = event.target.value;
    setInputValues((data) => ({
      ...data,
      [name]: value,
    }));
    console.log(inputValues);
  };
  const onChange = (value) => {
    console.log('changed', value);
     setInputValues((data) => ({
      ...data,
      [name]: value,
    }));
  };
    return (
        <div className="home g-bg-white g-pd-20">
         <div className='g-fs-16 g-fw-500 g-m-b-20'>配置项</div>
         <div className='g-pd-l-10'>
              {configList.map((config) => (
          <div key={config.name} className='g-flex-ac g-m-b-10'>
            <div className='g-pd-r-20 g-fs-14 g-m-b-20' style={{minWidth:'180px'}}>{config.name}</div>
            <div className='g-m-b-20'>
                    {config.name === "账号锁定时长" ? (
                <Input 
                  type="number"
                  value={inputValues[config.name]}
                  onChange={handleInputChange(config.name)}
                  placeholder="请输入数字"
                />
                // <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
              ) : (
                <Switch 
                  checked={configStates[config.name]} 
                  onChange={handleSwitchChange(config.name)} 
                />
              )}
            </div>
          </div>
        ))}
         </div>
        </div>
    )
}

export default HomeDetail;